<template>
  <div>
    <el-table :data="list" ref="tableData" v-loading.body="listLoading" stripe element-loading-text="Loading" border highlight-current-row @row-click="rowChecked" @selection-change="handleSelectionChange">
      <el-table-column align="center" label='订单编号'>
        <template slot-scope="scope">
          {{scope.row.orderCode}}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.orderStatus| formatStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存状态" align="center"  width="140px">
        <template slot-scope="scope">
          <span class="success" v-if="scope.row.orderStockStatus == 1">正常</span>
          <span class="danger" v-else>缺货</span>
          <!--{{scope.row.orderStockStatus|stockStatus}}-->
        </template>
      </el-table-column>
      <el-table-column label="结算状态" align="center"  width="140px">
        <template slot-scope="scope">
          <span class="success" v-if="scope.row.orderSettleStatus == 1">已结算</span>
          <span class="danger" v-else>未结算</span>
          <!--{{scope.row.orderStockStatus|stockStatus}}-->
        </template>
      </el-table-column>
      <el-table-column prop="orderPayPrice" label="订单总金额（元）" align="center" sortable>
        <template slot-scope="scope">
          {{scope.row.orderPayPrice | numFilter}}
        </template>
      </el-table-column>
      <el-table-column label="收货人联系方式" align="center">
        <template slot-scope="scope">
          {{scope.row.orderPhone}}
        </template>
      </el-table-column>
      <el-table-column label="收货人" align="center"  min-width="80px">
        <template slot-scope="scope">
          {{scope.row.receiver}}
        </template>
      </el-table-column>
      <el-table-column prop="orderCreateDate" align="center" label="下单时间" sortable>
        <template slot-scope="scope" v-if="scope.row.orderCreateDate!=null">
          <i class="el-icon-time"></i>
          <span>{{scope.row.orderCreateDate| formatDate('yyyy-MM-dd hh:mm')}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" min-width="110px">
        <template slot-scope="scope">
          <el-button v-if="(scope.row.orderStatus==1||scope.row.orderStatus==2)&&scope.row.orderStockStatus!='1'" type="text" size="small" @click="handleModifyStatus(scope.row,'1')">取消无货</el-button>
          <el-button v-if="(scope.row.orderStatus==1||scope.row.orderStatus==2)&&scope.row.orderStockStatus!='0'" type="text" size="small" @click="handleModifyStatus(scope.row,'0')">标记无货</el-button>
          <el-button v-if="scope.row.orderSettleStatus!='1'" type="text" size="small" @click="setOrderSettleStatus(scope.row,'1')">标记已结算</el-button>
          <el-button v-if="scope.row.orderSettleStatus!='0'" type="text" size="small" @click="setOrderSettleStatus(scope.row,'0')">标记未结算</el-button>
          <router-link :to="{ path: 'orderDetail', query: { orderId: scope.row.id }}">
            <el-button type="text" size="small">查看详情</el-button>
          </router-link>
        </template>
        <!--{ path: 'register', query: { plan: 'private' }}-->
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getOrderList } from '@/api/list'
import { setOrderStockStatus } from '@/api/list'
import { setOrderSettleStatus } from '@/api/list'

export default {
  name: 'tabOrder',
  // props: {
  //   orderStatus: {},
  //   orderCode: {}
  // },
  props: ['orderStatus', 'orderList'],
  data() {
    return {
      total: 100,
      listQuery: this.orderList,
      list: null,
      listLoading: true,
      upLower: {
        orderId: '',
        orderStockStatus: ''
      },
      settleStatus: {
        orderId: '',
        orderSettleStatus: ''
      }
    }
  },
  created() {
    this.getOrder()
  },
  filters: {
    numFilter(value) {
      const realVal = Number(value)
      return realVal.toFixed(2)
    },
    formatStatus: function(val) {
      return val === 1 ? '待付款' : val === 2 ? '待发货' : val === 3 ? '已发货' : val === 4 ? '已完成' : val === 5 ? '交易关闭' : '未知'
    }
  },
  // watch: {
  //   frontPoints(newValue, oldValue) {
  //     console.log(newValue)
  //   }
  // },
  methods: {
    getOrder() {
      this.listQuery.orderStatus = this.orderStatus
      // console.log(this.listQuery)
      this.listLoading = true
      this.$emit('create') // for test
      getOrderList(this.listQuery).then(response => {
        this.list = response.data.orderList
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.getOrder()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageIndex = val
      this.getOrder()
    },
    // 行单选
    rowChecked(row, event, column) {
      this.$refs.tableData.toggleRowSelection(row)
    },
    // 多选
    handleSelectionChange(val) {
      const me = this
      this.upLower.orderId = ''
      val.forEach(function(ele) {
        me.upLower.orderId += ele.id + ','
      })
    },
    lower() {
      this.upLower.orderStockStatus = 0
      if (this.upLower.orderId === '') {
        this.$message({
          message: '请选择需要标记无货的商品',
          type: 'error'
        })
      } else {
        setOrderStockStatus(this.upLower).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getOrder()
        })
      }
    },
    // 标记取消无货
    handleModifyStatus(row, status) {
      this.upLower.orderId = row.id
      this.upLower.orderStockStatus = status
      setOrderStockStatus(this.upLower).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.orderStockStatus = status
      })
    },
    // 标记取消无货
    setOrderSettleStatus(row, status) {
      this.settleStatus.orderId = row.id
      this.settleStatus.orderSettleStatus = status
      setOrderSettleStatus(this.settleStatus).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.orderSettleStatus = status
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
  .success {
    color: #67c23a
  }

  .danger {
    color: #f56c6c
  }
</style>